<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/static/index.css">
        
    </head>
    <body onwheel="changesize(event);" onmousemove="mousecoordinates(event);">
        <script src="/static/index.js"></script>
        <div id="container" onmouseenter="reset();" style="width: 100%;height: 100%;">
            <div id="canvascontainer">
                <img id="sourceimg" src={{byte_im}} width={{w}} height={{h}} style="visibility: hidden;" style="position: fixed;"/>
                <canvas id="source" width={{w}} height={{h}} onclick="drawenable();" onmousemove="draw();" ></canvas>
            </div>    
            <div id="compare">
                <img id="oldimg" width="512" height="512" src="">
            </div>        
            <div id="moveimglistner" style="position: absolute; width: 100%;height: 100%;top: 0%;left: 0%; z-index: 3;"  onclick="moveimg(); " onmousemove="grabselector();"></div>
            <div id="selector" onmousemove="selector();" onclick="snapshot();"></div>
            <div id="hint">
                <p id="hinttext"></p><input id="hintinp" type="text" onchange="changeselectorsize(event);"><p>px</p>
            </div>
            <div id="settings">
                <div id="settingsbarbtns">
                    <div id="setref" class="btn" onclick="setreftoggle();"><p class="txt">Set Reference</p></div>
                    <div id="resetref" class="btn" onclick="resetref();"><p class="txt">Reset Reference</p></div>
                    <div id="crop" class="btn" onclick="cropimg();"><p class="txt">Crop</p></div>
                    <div id="compbtn" class="btn" onclick="compare();"><p class="txt">Compare</p></div>
                    <div id="moveimg" class="btn" onclick="moveimgenablefirst();"><p class="txt">Move Image</p></div>
                    <div id="eraseon" class="btn" onclick="erasemodeon()"><p class="txt">Erase</p></div>
                    <div id="drawon" class="btn" onclick="drawmodeon()"><p class="txt">Draw</p></div>
                    <div id="fit" class="btn" onclick="fit();"><p class="txt">Fit</p></div>
                    <div id="uploadnew" class="btn" onclick="uploadnewimage();"><p class="txt">New</p></div>
                    <div id="undo" class="btn" onclick="undoimg();"><p class="txt">Undo</p></div>
                </div>
                <div id="settingsbarparams">
                    <div id="workflowsettings">
                        <div class="dropdown" id="wfsdropdown">
                            <button class="dropbtn" id="wfbutton">Select Workflow</button>
                            <div class="dropdown-content" id="wfscont">
                            </div>
                        </div>
                        <div class="dropdown" id="modelsdropdown">
                            <button class="dropbtn" id="modelbutton">Select Model</button>
                            <div class="dropdown-content" id="modelscont">
                            </div>
                        </div>
                        <div class="dropdown" id="paramsdropdown">
                            <button class="dropbtn" id="paramsbutton">Change Parameter</button>
                            <input id="paramvalue" type="text" size="4"  onchange="paramset();">
                            <div class="dropdown-content" id="paramscont">
                            </div>
                        </div>
                    </div>
                    <div id="generalsettings">
                        <p id="label">Box Size: </p>
                        <input type="text" id="selectorsize" onchange="changeselectorsize(event);" size="4">
                        <p id="label2">Fade Factor: </p>
                        <input id="ff" type="text" size="4"  onchange="ffupdate();">
                        <p id="label3">Eraser/Pencil Size: </p>
                        <input id="erasersize" type="text" size="4">
                        <input id="clr" type="color" size="3">
                        <input id="inprange" type="range" min="0" max="255" step="1">
                    </div>
                </div>
                <div id="settingsbarthird">
                    <div id="locksetts">
                        <div id="lockleft" class="btn" onclick="lockleft();"><p class="txt">Left</p></div>
                        <div id="lockright" class="btn" onclick="lockright();"><p class="txt">Right</p></div>
                        <div id="lockbottom" class="btn" onclick="lockbottom();"><p class="txt">Bottom</p></div>
                        <div id="locktop" class="btn" onclick="locktop();"><p class="txt">Top</p></div>
                    </div>
                    <div id="lockfull">
                        <div id="lockbox" class="btn" onclick="lockbox();"><p class="txt">Lock To Image</p></div>
                    </div>
                    <div id="othersetts">
                        <div id="resetimg" class="btn" onclick="resetimg();"><p class="txt">Reset Image</p></div>
                        <div id="saveimg" class="btn" onclick="saveimg()"><p class="txt">Save Image</p></div>
                        <div id="saveexit" class="btn" onclick="savejson()"><p class="txt">Generate</p></div>                        
                    </div>
                </div>
                <label for="openimgadd" id="uploadanotherimg"><p class="icontxt">+</p></label>
                <input id="openimgadd" type="file">
            </div>
            <div id="cancel" onclick="cancelgen();">+</div>
            <div id="settings2">
                <div id="moveimg1"  onclick="moveimgenable();"><p class="txt">Move Image</p></div>
                <div id="done" onclick="compimage();"><p class="txt">Done</p></div>
                <label for="openimgadd" id="uploadanotherimg"><p class="icontxt">+</p></label>
            </div>
            <div id="uploadcontainer">
                <label for="openimg" class="uploadstyle">
                    <p>Upload Image</p>
                </label>
                <input id="openimg" type="file">
            </div>
                
                
        </div>
        <div id="msg"><p class="txt">Close the tab if not auto-closed</p></div>
    </body>
</html>